<!-- 发布楼宇 -->
<template>
  <div class="layout releaseBuilding">
    <ContainerTitle :text="id == '' ? '楼宇发布' : '编辑楼宇'"></ContainerTitle>
    <div class="subMsg" v-if="type == 0">
      <span>发布楼宇信息，招揽意向企业</span>
    </div>
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="149px"
      style="text-align: left"
    >
      <el-form-item label="楼宇名称：" prop="buildingName">
        <el-input
          v-model.trim="form.buildingName"
          placeholder="请输入楼宇名称"
          maxlength="50"
        ></el-input>
      </el-form-item>

      <el-form-item label="楼宇类型：" label-width="130px" prop="buildingType">
        <el-select
          v-model.trim="form.buildingType"
          placeholder="请选择楼宇类型"
        >
          <el-option
            v-for="(item, index) in buildingType"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="楼宇级别：" prop="buildingLeave">
        <el-select
          v-model.trim="form.buildingLeave"
          placeholder="请选择楼宇级别"
        >
          <el-option
            v-for="(item, index) in buildingLeave"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="可注册：" prop="canRegister" label-width="130px">
        <el-radio-group v-model="form.canRegister">
          <el-radio v-model="form.canRegister" :label="1">是</el-radio>
          <el-radio v-model="form.canRegister" :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="产业领域：" prop="industryType">
        <el-select
          v-model.trim="form.industryType"
          placeholder="请选择产业领域"
        >
          <el-option
            v-for="(item, index) in industryType"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="楼宇所在街道："
        label-width="130px"
        prop="streetCode"
      >
        <el-select
          v-model.trim="form.streetCode"
          placeholder="请选择楼宇所在街道"
        >
          <el-option
            v-for="(item, index) in streetCode"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="详细位置：" prop="address">
        <el-input
          v-model.trim="form.address"
          placeholder="请输入楼宇所在详细位置"
          maxlength="100"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="装修情况："
        label-width="130px"
        prop="buildingDecorationType"
      >
        <el-select
          v-model.trim="form.buildingDecorationType"
          placeholder="请选择装修情况"
        >
          <el-option
            v-for="(item, index) in buildingDecorationType"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="楼层：" prop="floorType">
        <el-select
          v-model.trim="form.floorType"
          placeholder="请选择楼层"
          @change="buildFloorChange"
        >
          <el-option
            v-for="(item, index) in floorType"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
        <span v-if="form.floorType != 1 && form.floorType">
          <span class="m-left">
            地上&nbsp;
            <el-input
              class="little-input"
              v-model.trim="form.aboveGroundFloors"
              placeholder=""
              maxlength="3"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input
            >&nbsp;层
          </span>
          <span class="m-left">
            地下&nbsp;
            <el-input
              class="little-input"
              v-model.trim="form.undergroundFloors"
              placeholder=""
              maxlength="3"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input
            >&nbsp;层
          </span>
          <span class="m-left">
            楼高&nbsp;
            <el-input
              class="little-input"
              v-model.trim="form.buildingHeight"
              placeholder=""
              maxlength="3"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input
            >&nbsp;米&nbsp;
          </span>
        </span>
        <span v-if="form.floorType == 1 && form.floorType">
          <el-input
            class="little-input"
            v-model.trim="form.buildingFloor"
            placeholder=""
            maxlength="3"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
          >&nbsp;层
        </span>
      </el-form-item>
      <div class="_price">
        <el-form-item label="租金：" prop="rentMode" flex="1" ref="rentMode">
          <el-radio-group v-model="form.rentMode" @change="form.rentPrice = ''">
            <el-radio :label="1">价格</el-radio>
            <el-radio :label="2">面议</el-radio>
            <el-radio :label="3">不租</el-radio>
          </el-radio-group>
          <span v-if="form.rentMode == 1">
            <el-input
              class="mid-input"
              v-model.trim="form.rentPrice"
              placeholder=""
              maxlength="9"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>
            <el-select class="sel_input" v-model.trim="form.rentUnitMeasure">
              <el-option
                v-for="(item, index) in rentUnitMeasure"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </span>
        </el-form-item>
      </div>
      <el-form-item
        label="出售价格："
        prop="sellMode"
        class="_price"
        ref="sellMode"
      >
        <el-radio-group
          v-model="form.sellMode"
          @change="form.sellingPrice = ''"
        >
          <el-radio :label="1">价格</el-radio>
          <el-radio :label="2">面议</el-radio>
          <el-radio :label="3">不售</el-radio>
        </el-radio-group>
        <span v-show="form.sellMode == 1" style="min-width: ">
          <el-input
            class="mid-input"
            v-model.trim="form.sellingPrice"
            placeholder=""
            maxlength="9"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
          >&nbsp;元/㎡
        </span>
      </el-form-item>
      <el-form-item label="出租面积：" prop="rentalArea" flex="1">
        <el-input
          @input="input"
          v-model.trim="form.rentalArea"
          placeholder="请输入出租面积"
          maxlength="11"
        ></el-input
        >&nbsp;平米&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </el-form-item>
      <!--  label-width="100px" class="_rentTermMinimum" -->
      <el-form-item label="起租期：" prop="rentTermMinimum">
        <el-input
          v-model.trim="form.rentTermMinimum"
          placeholder="请输入起租期"
          maxlength="3"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input
        >&nbsp;月
      </el-form-item>

      <el-form-item label="推荐工位数量：" prop="appealName">
        <el-input
          class="mid-input"
          v-model.trim="form.recommendedStationMinimum"
          placeholder=""
          maxlength="5"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input
        >&nbsp;-&nbsp;<el-input
          class="mid-input"
          v-model.trim="form.recommendedStationMaximum"
          placeholder=""
          maxlength="5"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
      </el-form-item>

      <el-form-item label="楼宇介绍：" prop="buildingIntroduce">
        <el-input
          :autosize="{ minRows: 4, maxRows: 4 }"
          type="textarea"
          style="width: 640px"
          v-model.trim="form.buildingIntroduce"
          placeholder=""
          show-word-limit
          maxlength="500"
        ></el-input>
      </el-form-item>

      <el-form-item label="周边配套：" prop="restaurantNum">
        <span class="m-left">
          餐厅&nbsp;
          <el-input
            class="little-input"
            v-model.trim="form.restaurantNum"
            placeholder=""
            maxlength="3"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
          >&nbsp;家
        </span>
        <span class="m-left">
          公交站&nbsp;
          <el-input
            class="long-input"
            v-model.trim="form.busStation"
            maxlength="50"
            placeholder="请输入附近公交站点名称"
          ></el-input
          >&nbsp;
        </span>
        <span class="m-left">
          医院&nbsp;
          <el-input
            class="long-input"
            v-model.trim="form.hospital"
            placeholder="请输入附近医院名称"
            maxlength="50"
          ></el-input
          >&nbsp;
        </span>
      </el-form-item>

      <el-form-item label="     " prop="apartments">
        <span class="m-left">
          公寓&nbsp;
          <el-input
            class="little-input"
            v-model.trim="form.apartments"
            placeholder=""
            maxlength="3"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
          >&nbsp;所
        </span>
        <span class="m-left">
          地铁站&nbsp;
          <el-input
            class="long-input"
            v-model.trim="form.subwayStation"
            placeholder="请输入附近地铁站点名称"
            maxlength="50"
          ></el-input
          >&nbsp;
        </span>
        <span class="m-left">
          高铁&nbsp;
          <el-input
            class="long-input"
            v-model.trim="form.highSpeedRail"
            placeholder="请输入附近高铁站名称"
            maxlength="50"
          ></el-input
          >&nbsp;
        </span>
      </el-form-item>

      <el-form-item label="     ">
        <span class="m-left" style="margin-left: 142px">
          机场&nbsp;
          <el-input
            class="long-input"
            v-model.trim="form.airport"
            placeholder="请输入附近机场站点名称"
            maxlength="50"
          ></el-input
          >&nbsp;
        </span>
      </el-form-item>

      <el-form-item label="商圈:" prop="businessDistrict">
        <el-select
          v-model.trim="form.businessDistrict"
          placeholder="请选择附近商圈名称"
        >
          <el-option
            v-for="(item, index) in buildingBusinessDistrict"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入驻企业信息：" prop="settledEnterpriseInformation">
        <el-input
          v-model.trim="form.settledEnterpriseInformation"
          placeholder="请输入知名企业(逗号分隔）"
          maxlength="200"
          style="width: 640px"
        ></el-input>
      </el-form-item>

      <el-form-item label="企业数据：" prop="financeStatus">
        <span class="m-left">
          高新企业&nbsp;
          <el-input
            class="little-input"
            v-model.trim="form.highTechEnterprisesNum"
            placeholder=""
            maxlength="3"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
          >&nbsp;家
        </span>
        <span class="m-left">
          上市企业&nbsp;
          <el-input
            class="little-input"
            v-model.trim="form.listedEnterprisesNum"
            placeholder=""
            maxlength="3"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
          >&nbsp;家
        </span>
        <span class="m-left">
          生物医药企业&nbsp;
          <el-input
            class="little-input"
            v-model.trim="form.biomedicalEnterpriseNum"
            placeholder=""
            maxlength="3"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
          >&nbsp;家
        </span>
      </el-form-item>

      <el-form-item label="楼宇物业公司：" prop="propertyCompany">
        <el-input
          v-model.trim="form.propertyCompany"
          placeholder="请输入物业公司名称"
          maxlength="50"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="物业公司服务介绍："
        label-width="149px"
        prop="propertyCompanyIntroduce"
      >
        <el-input
          :autosize="{ minRows: 4, maxRows: 4 }"
          type="textarea"
          style="width: 640px"
          v-model.trim="form.propertyCompanyIntroduce"
          placeholder="请输入物业公司介绍"
          show-word-limit
          maxlength="500"
        ></el-input>
      </el-form-item>

      <el-form-item label="物业费：" prop="propertyFee" flex="1">
        <el-input
          class="mid-input"
          v-model.trim="form.propertyFee"
          placeholder=""
          maxlength="9"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
        <el-select class="sel_input" v-model.trim="form.propertyPriceUnit">
          <el-option
            v-for="(item, index) in buildingPropertyPriceUnit"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="水电价格：" prop="hydropowerPrice" flex="1">
        <el-input
          class="mid-input"
          v-model.trim="form.hydropowerPrice"
          placeholder=""
          maxlength="50"
          style="width: 230px"
        ></el-input>
        <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
        <!-- &nbsp;元/月 -->
      </el-form-item>
      <el-form-item
        label="相关视频："
        style="display: block"
        prop="buildingVideo"
      >
        <!-- <finalUpload
          @changeImgUp="changeImgUpProve"
          tip="只能上传房屋视频，最多上传1张，每张最大30M"
        ></finalUpload> -->
        <uploadViedo
          ref="uploadingViedo"
          @videoSuccess="videoSuccess"
          @videoDel="videoDel"
        ></uploadViedo>
      </el-form-item>

      <el-form-item label="视频封面：" prop="videoCover">
        <finalUpload
          @changeImgUp="changeCover"
          @delImg="delCover"
          :limit="1"
          ref="coverVideo"
          tip="上传视频封面"
        ></finalUpload>
      </el-form-item>

      <el-form-item label="楼宇图片：" prop="buildingImages">
        <div style="width: 640px">
          <finalUpload
            @changeImgUp="upLoadImg"
            @delImg="delImg"
            :limit="9"
            ref="imgLists"
            tip="只能上传房屋图片，最多上传9张，每张最大2M"
          ></finalUpload>
        </div>
      </el-form-item>

      <el-form-item label="联系人：" prop="contactsPerson">
        <el-input
          v-model.trim="form.contactsPerson"
          placeholder="请输入联系人"
          maxlength="50"
        ></el-input>
      </el-form-item>

      <el-form-item label="联系方式：" label-width="130px" prop="contactsPhone">
        <el-input
          v-model.trim="form.contactsPhone"
          placeholder="请输入联系方式"
          maxlength="13"
          @input="
            form.contactsPhone = form.contactsPhone.replace(/[^\d-]/g, '')
          "
        ></el-input>
      </el-form-item>

      <!-- 原为可跳转到@click="$router.push({ path: 'settlementAgreement' })" -->
      <el-form-item label=" " prop="readChecked">
        <el-checkbox v-model="form.readChecked">
          <div class="read">
            阅读并同意<span style="color: rgb(64, 158, 255)"
              >《楼宇企业入驻协议》</span
            >
          </div>
        </el-checkbox>
      </el-form-item>
    </el-form>
    <Buttons
      :buttons="buttons"
      @cancel="cancel"
      @finished="finished"
      @send="send(1)"
    ></Buttons>
  </div>
</template>

<script>
import finalUpload from "./components/finalUpload";
import uploadViedo from "./components/upViedo";
import config from "@/utils/config";
import { request } from "@/utils/request";

import releaseRules from "@/formRules/investment/releaseRules.js";

import { getBuildingInfo, addBuilding, updateBuilding } from '@/common/api/company.js'

export default {
  mixins: [releaseRules],
  components: {
    finalUpload,
    uploadViedo,
  },
  data() {
    return {
      id: "",
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "招商中心",
          value: "",
        },
        {
          label: "我的楼宇",
          value: "myBuilding",
        },
      ],
      canNext: true,
      type: 0,
      buildingPropertyPriceUnit: [], // 物业价格单位
      buildingBusinessDistrict: [], // 附近商圈
      buildingType: [],
      buildingLeave: [],
      industryType: [],
      streetCode: [],
      buildingDecorationType: [],
      floorType: [],
      rentMode: [],
      rentUnitMeasure: [],
      imgList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {
    getMaxLength() {
      if (this.form.rentalArea) {
        console.log("this.form.rentalArea", this.form.rentalArea);
        let res = (this.form.rentalArea + "").indexOf(".") == -1 ? "9" : "10";
        return res;
      } else {
        return "";
      }
    },
    buttons() {
      let btns = [
        { text: "取消", type: "normal", size: "l", method: "cancel" },
        {
          text: this.id == "" ? "保存" : "修改",
          type: this.canNext ? "success" : "weakSuccess",
          size: "l",
          method: "finished",
        },
        {
          text: this.canNext ? "发布" : "发布中",
          type: this.canNext ? "success" : "weakSuccess",
          size: "l",
          method: "send",
        },
      ];
      return btns;
    },
  },
  //方法集合
  methods: {
    input(e) {
      let reg = /^(0|[1-9]\d*)(\.\d{0,1})?/; // 正则限制输入的值只能是数字和支持小数点后一位
      let price = e.match(reg);
      this.form.rentalArea = price ? price[0] : "";
    },
    input2(e) {
      if (e || e.length == 11) {
        let price = e.match(reg);
        this.form.rentalArea = price ? price[0] : "";
        // console.log(this.form.rentalArea)
      }
      let reg = /^(0|[1-9]\d*)(\.\d{0,1})?/; // 正则限制输入的值只能是数字和支持小数点后一位
      let price = e.match(reg);
      this.form.rentalArea = price ? price[0] : "";
      // console.log(this.form.rentalArea)
    },
    cancel() {
      this.$confirm("确认取消?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.$router.push({ path: "/company/myBuilding" });
        })
        .catch(() => {});
    },
    finished() {
      if (!this.canNext) return;
      if (this.$refs.uploadingViedo.imgFlag)
        return this.$message.warning("正在上传视频...");
      if (this.$refs.imgLists.upload.isUploading)
        return this.$message.warning("正在上传图片...");
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.buildingVideo && !this.form.videoCover) {
            return this.$message.error("请上传视频封面");
          }
          if (!this.form.buildingVideo && this.form.videoCover) {
            return this.$message.error("请上传相关视频");
          }
          this.$confirm(
            `确认${
              this.id == ""
                ? "保存？"
                : "修改后内容将会在招商中心展示，企业客户可以申请入驻。"
            }`,
            `${this.id != "" ? "确认要修改这条楼宇信息？" : "提示"}`,
            {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              // console.log("这里是上传删除前的数据", obj);
              if (this.id != "") {
                this.save1();
              } else {
                this.sendMsg(0);
              }
            })
            .catch(() => {
              this.canNext = true;
            });
        }
      });
    },
    async save1() {
      this.canNext = false;
      let obj = this.form;
      delete obj.checkAgree;
      obj.id = this.id;
      obj.state = 0;
      let res = await updateBuilding(obj)
      this.canNext = true;
      if (res.code == 200) {
        this.$message.success("修改成功！");
        setTimeout(() => {
          this.$router.back();
        }, 500);
      } else {
        this.$message.error(res.msg);
      }
    },
    send(state) {
      if (!this.canNext) return;
      if (this.$refs.uploadingViedo.imgFlag)
        return this.$message.warning("正在上传视频...");
      if (this.$refs.imgLists.upload.isUploading)
        return this.$message.warning("正在上传图片...");
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.buildingVideo && !this.form.videoCover) {
            return this.$message.error("请上传视频封面");
          }
          if (!this.form.buildingVideo && this.form.videoCover) {
            return this.$message.error("请上传相关视频");
          }
          this.$confirm("确认发布?", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.canNext = false;
            this.sendMsg(state);
          })
          .catch(() => {
            this.canNext = true;
          });
        }
      });
    },
    async sendMsg(state) {
      let obj = this.form;
      delete obj.checkAgree;
      // console.log("这是上传的数据", obj);
      obj.state = state;
      let res = await addBuilding(obj);
      // console.log(res);
      if (res.code == 200) {
        this.canNext = true;
        this.$message.success(`${state == 0 ? "保存成功！" : "发布成功！"}`);
        setTimeout(() => {
          this.$router.push({ path: "/company/myBuilding" });
        }, 500);
      } else {
        this.canNext = true;
        this.$message.error(res.msg);
      }
    },
    buildFloorChange() {
      this.form.aboveGroundFloors = ""; //地上多少层
      this.form.undergroundFloors = ""; // 地下多少层
      this.form.buildingHeight = ""; //楼高
      this.form.buildingFloor = ""; //层
    },
    upLoadImg(val) {
      this.imgList.push(val);
      this.form.buildingImages = this.imgList.join(",");
      this.$refs["form"].validateField("buildingImages");
    },
    delImg(i) {
      this.imgList.splice(i, 1);
      this.form.buildingImages = this.imgList.join(",");
    },
    videoSuccess(e) {
      this.form.buildingVideo = e;
    },
    videoDel() {
      this.form.buildingVideo = "";
    },
    changeCover(e) {
      this.form.videoCover = e;
    },
    delCover() {
      this.form.videoCover = "";
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 调用公共方法中的查询字典表
    this.getDictList(
      this,
      `building_type,building_leave,building_industry,street_code,building_decoration_type,building_floor_type,building_rent_mode,rent_unit_measure,building_property_price_unit,building_sell_mode,building_business_district`
    ).then((res) => {
      const data = res;
      // console.log(data);
      Object.keys(data).forEach((item) => {
        data[item].forEach((items) => {
          items.dictValue = Number(items.dictValue);
        });
      });
      this.buildingType = data.building_type;
      this.buildingLeave = data.building_leave;
      this.industryType = data.building_industry;
      this.streetCode = data.street_code;
      this.buildingDecorationType = data.building_decoration_type;
      this.floorType = data.building_floor_type;
      this.rentMode = data.building_rent_mode;
      this.rentUnitMeasure = data.rent_unit_measure;
      this.buildingBusinessDistrict = data.building_business_district;
      this.buildingPropertyPriceUnit = data.building_property_price_unit;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    // console.log("1111");
    // /srs-business-api/building/investment/info/get/{id}
    this.id = this.$route.query.id ? this.$route.query.id : "";
    // console.log(this.id);
    let crumb = {
      label: "",
      value: "releaseBuilding",
      choose: true,
    };
    if (this.id == "") {
      crumb.label = "楼宇发布";
      this.crumbs.push(crumb);
      return;
    }
    crumb.label = "楼宇编辑";
    this.crumbs.push(crumb);
    let res = await getBuildingInfo(this.id)
    // console.log(this.form.readChecked, "this.form.readChecked");
    if (res.code == 200) {
      let arr = res.data.buildingImages.split(",");
      res.data.businessDistrict = Number(res.data.businessDistrict);
      this.$refs.imgLists.addform.fileList = JSON.parse(JSON.stringify(arr));
      this.imgList = JSON.parse(JSON.stringify(arr));
      this.$refs.coverVideo.addform.fileList = res.data.videoCover
        ? [res.data.videoCover]
        : [];
      this.$refs.uploadingViedo.imageUrl = res.data.buildingVideo;
      res.data.readChecked = true;
      this.form = res.data;
    }
  },
};
</script>
<style lang='scss' scoped>
.subMsg {
  width: 100%;
  padding: 10px 15px;
  background: #f1f2f4;
  text-align: left;
  margin-bottom: 24px;
  > span {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #333333;
  }
}
::v-deep .el-input {
  width: 245px;
}
.m-left {
  margin-left: 10px;
}
.little-input {
  width: 50px;
}
.mid-input {
  width: 120px;
}
.long-input {
  width: 200px;
}
.btnDiv {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}

.btnDiv div {
  background-color: #f1f2f4;
  color: #045db9;
  padding: 10px 50px;
  font-size: 15px;
  border-radius: 5px;
  transition: all 0.2s ease 0s;
}
.btnDiv div:nth-child(2) {
  margin: 0 20px;
}

.btnDiv div:hover {
  box-shadow: 0px 3px 5px #e1e1e1;
  cursor: pointer;
}
//@import url(); 引入公共css类
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}

.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  margin-top: 14px;
  width: 800px;
  margin-left: 30px;
}

.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
  .tip {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    margin-left: 30px;
  }
}

.msgDiv {
  margin: 40px 0;
}

.toLoginBtn {
  color: #ffffff;
  background-color: #045db9;
  padding: 10px 40px;
  display: inline-block;
  font-size: 15px;
  border-radius: 5px;
  transition: all 0.2s ease 0s;
}

.toLoginBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
::v-deep .sel_input .el-input {
  width: 120px;
}
</style>

<style lang="scss">
.releaseBuilding ._rentalArea .el-input {
  width: 132px;
}
.releaseBuilding ._rentTermMinimum .el-input {
  width: 132px;
}
</style>